import React , { Component, PropTypes } from 'react';

import './../css/main.scss';

import Link from './CustomLink';

class Header extends Component {

    constructor(){
        super();
        this.navList = [
            {name:"电影",to:"/movie",className:"movie"},
            {name:"图书",to:"/book",className:"book"},
            {name:"广播",to:"/MovieDetail/26787574",className:"status"},
            {name:"相册",to:"/photo",className:"photo"}
        ];
        this.state = {
            showSearch:false
        }
    }

    static propTypes = {
        renderLeft:PropTypes.func,
        renderRight:PropTypes.func
    }

    static defaultProps = {
        renderLeft:()=>null,
        renderRight:()=>null
    }

    search() {
        const { showSearch } = this.state;
        this.setState({
            showSearch:!showSearch
        });
    }

    onSubmit() {
        const { searchInput } = this.refs;
    }


    goto(ma , to ){
        const {history} = this.props;
        console.log(to , ma)
        history.push(to)
        // console.log(this.props)
    }

    render () {
        const { showSearch } = this.state;
        return (
            <div className="header" data-component>
                <Link className="logo" to="/">豆瓣</Link>
                <div className="header-logo">
                    <ul>
                        {this.navList.map( ( nav , index )=> {
                            const { name , to , className } = nav;
                            return (
                                <li key={index}>
                                    <Link to={to} className={className} preventDefault={false} >
                                        {name}
                                    </Link>
                                </li>
                            )
                        })}
                        <li className="searchBar" onClick={()=>this.search()} ></li>
                    </ul>
                </div>
                <div className={"search-box"+(showSearch?" ":" hide")}>
                    <form className="search-form" onSubmit={()=>this.onSubmit()}>
                        <div className="close" onClick={()=>this.search()}>关闭</div>
                        <div className="input">
                            <input type="text" placeholder="搜索" ref="searchInput"/>
                        </div>
                    </form>
                </div>
            </div>
        )
    }
};

export default Header;